<template>
    <div>
        <van-steps :active="active" active-icon="success" active-color="#38f">
            <van-step>买家下单</van-step>
            <van-step>付款</van-step>
            <van-step>出库</van-step>
            <van-step>交易完成</van-step>
        </van-steps>
        <van-field center colon v-model="receiverName" label="收件人"/>
        <van-field center colon v-model="receiverMobile" type="tel" label="收货人电话"/>
        <van-field center colon v-model="receiverAddr" type="text" label="收货地址"/>
        <div class="m-container m-margin">
            <div v-for="item in list" :key="item.id">
                <van-card
                        :num="item.quantity"
                        :price="item.price/100"
                        :desc="item.productName"
                        :title="item.productName"
                        :thumb="item.productImage"
                />
            </div>
        </div>
        <van-submit-bar :price="totalPrice" button-text="提交订单" @submit="onSubmit"/>
    </div>
</template>

<script>
    import {getCartList, createOrder} from "../../utils/apis";
    import {Toast} from 'vant';
    import {post} from "../../utils/http";

    export default {
        name: "orderSettle",
        data() {
            return {
                receiverName: '',
                receiverAddr: '',
                receiverMobile: '',
                active: 0,
                totalPrice: 0,
                list: [],
            }
        },
        created() {
            this.getCarts()
        },
        methods: {
            getCarts() {
                getCartList().then(res => {
                    this.list = res.data
                    for (let i = 0; i < res.data.length; i++) {
                        this.totalPrice += res.data[i].totalPrice
                    }
                })
            },
            onSubmit() {
                let receiverName = this.receiverName
                let receiverAddress = this.receiverAddr
                let receiverMobile = this.receiverMobile
                if (receiverName === '') {
                    Toast("收件人姓名没填写")
                    return;
                }
                if (!(/^1[3|4|5|7|8]\d{9}$/.test(receiverMobile))) {
                    Toast("收件人电话有误")
                    return;
                }
                if (receiverAddress === '') {
                    Toast("收件人地址没填写")
                    return;
                }
                let data = {
                    receiverName,
                    receiverAddress,
                    receiverMobile
                }
                this.$axios.post(
                    "order/create",
                    {
                        ...data
                    },
                    {
                        headers: {
                            'Content-Type': 'application/json;charset=UTF-8'
                        }
                    }
                ).then(res => {
                    console.log(res)
                    if (res.data.status === 10000)
                        this.$router.push({name: 'OrderDetail', query: {orderNo: res.data.data}})
                })
            }
        }
    }
</script>

<style scoped>
    .m-container {
        padding: 0 12px;
    }

    .m-margin {
        margin-bottom: 50px;
    }
</style>
